<!-- 当前组件名： component -->
<template>
  <div class='page_component' v-loading='loading'>
    <div class='page_component-container'>
      <cfCard title='' class='page-container-search'>
        <el-form slot="content" :model="searchParams" ref="searchParams" size="small" :inline="true" label-width="68px">
          <el-form-item label="任务名称" prop="jobName">
            <el-input v-model="searchParams.jobName" placeholder="请输入任务名称" clearable v-search="handleSearch" />
          </el-form-item>
          <el-form-item label="任务组名" prop="jobGroup">
            <el-select v-model="searchParams.jobGroup" placeholder="请选择任务组名" clearable @change="handleSearch">
              <el-option v-for="dict in sysJobGroup" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态" prop="status">
            <el-select v-model="searchParams.status" placeholder="请选择任务状态" clearable @change="handleSearch">
              <el-option v-for="dict in sysJobStatus" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </cfCard>
      <div class='bottom12'></div>
      <cfCard title='列表' hasTable :tableObj='tableDataObj' class='page_component-container-bottom'>
        <!--表格区域-->
        <template slot='btn'>
          <el-button size='mini' type='primary' @click='handleAdd' v-hasPermi="['monitor:job:add']">新增</el-button>
          <el-button type="info" plain icon="el-icon-s-operation" size="mini" @click="handleJobLog" v-hasPermi="['monitor:job:query']" >日志</el-button>
          <el-button size='mini' type='warning' @click='handleExport' v-hasPermi="['monitor:job:export']">导出</el-button>
        </template>
        <template slot='content'>
          <cfTable ref='cfTable' :tableDataObj='tableDataObj' :tableData='tableData'>
            <template slot='jobGroup'>
              <el-table-column label='任务组名' width='100px'>
                <dict-tag slot-scope="{row}" :options="sysJobGroup" :value="row.jobGroup"/>
              </el-table-column>
            </template>
            <template slot='status'>
              <el-table-column label='状 态' width='100px'>
                <el-switch slot-scope="{row}" v-model="row.status" active-value="0" inactive-value="1" @change="handleStatusChange(row)" ></el-switch>
              </el-table-column>
            </template>
            <template slot='operate'>
              <el-table-column label="操作" width="160" align="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" v-hasPermi="['monitor:job:edit']" >修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']" >删除</el-button>
                  <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="handleRun" icon="el-icon-caret-right" v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
                      <el-dropdown-item command="handleView" icon="el-icon-view" v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
                      <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation" v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </template>
          </cfTable>
          <pagination :total='queryParams.total' :page.sync='queryParams.pageNum' :limit.sync='queryParams.pageSize' @pagination='getListFn'/>
        </template>
      </cfCard>
    </div>
    <component :is='dialogObj.component' v-if='dialogObj.visible' :dialogObj='dialogObj' @refresh='getListFn' />
    <cfPageDialog v-if='pageDialogObj.visible' :pageDialog='pageDialogObj'>
      <log v-if='pageDialogObj.visible' :pageDialogObj='pageDialogObj'></log>
    </cfPageDialog>
  </div>
</template>

<script>
import updateDialog from './updateDialog';
import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus, exportJob } from "@/api/monitor/job";
import log from './log';
import detail from './detail';
export default {
  name: 'job',
  components: {updateDialog, log, detail},
  data() {
    return {
      loading: true, /**控制加载效果 */
      tableDataObj: {  /**表格控件*/
        id: 'id', /**表格唯一标识*/
        showSelection: true, /**控制表格多选*/
        showIndex: true, /**控制表格序号*/
        defaultExpandAll: true, /**控制树结构表格是否默认全部展开*/
        treeProps: {children: 'children', hasChildren: 'hasChildren'}, /**树结构表格配置项*/
        option: [ /**表格列项配置*/
          {id: 1, label: '任务编号', prop: 'jobId', show: 1, needSlot: false},
          {id: 2, label: '任务名称', prop: 'jobName', show: 1, needSlot: false},
          {id: 3, label: '任务组名', prop: 'jobGroup', show: 1, needSlot: true},
          {id: 4, label: '调用目标字符串', prop: 'invokeTarget', minWidth: 150, show: 1, needSlot: false},
          {id: 5, label: 'cron执行表达式', prop: 'cronExpression', minWidth: 150, show: 1, needSlot: false},
          {id: 6, label: '状态', prop: 'center', show: 1, needSlot: true},
        ]
      },
      tableData: [], /**表格数据*/
      dialogObj: { /**弹窗配置项*/
        visible: false, /**控制弹窗显示和隐藏*/
        id: null, /**数据唯一标识，用于详情和编辑*/
        title: '新增', /**弹窗标题*/
        width: '480px', /**弹窗宽度*/
        component: '', /**弹窗组件*/
        uploadObj: { /**导入弹窗配置*/
          accept: '.xls, xlsx', /**接收文件类型*/
          limit: 1, /**允许上传最大文件数*/
          size: 10*1024*1024 /**允许上传文件最大容量*/
        } /**弹窗组件*/
      },
      searchParams: { /**搜索区域对象*/
        jobName: '',
        jobGroup: '',
        status: '',
      },
      queryParams: { /**分页对象*/
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      pageDialogObj: { /**二级菜单页面配置文件*/
        visible: false, /**控制弹窗显示和隐藏*/
        id: '', /**数据唯一标识，用于详情和编辑*/
        title: '标题', /**二级菜单标题*/
        from: undefined, /**二级菜单操作对象来源Object：{id, title, componentName}*/
        componentName: '' /**二级菜单对应组件*/
      }
    }
  },
  computed: {
    newAttr() {
      return '测试数据'
    },
  },
  async mounted() {
    await this.getSysJobGroup();
    await this.getSysJobStatus();
    this.getListFn();
  },
  methods: {
    async getListFn() { /**获取列表数据方法*/
      this.loading = true;
      const data = {
        ...this.searchParams, 
        ...this.queryParams
      }
      const res = await listJob(data);
      if(res.code == 200) {
       this.tableData = res.rows;
       this.queryParams.total = res.total;
      }
      setTimeout(()=>{
        this.loading = false;
      }, 500)
    },
    handleAdd() { /**新增列表数据方法*/
      this.dialogObj.visible = true;
      this.dialogObj.id = '';
      this.dialogObj.title = '添加任务';
      this.dialogObj.component = 'updateDialog';
    },
    handleEdit(obj) { /**编辑列表数据方法*/
      this.dialogObj.visible = true;
      this.dialogObj.id = obj.jobId;
      this.dialogObj.title = '修改任务';
      this.dialogObj.component = 'updateDialog';
    },
    // 任务状态修改
    async handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$confirm(`确认要${text}${row.jobName}任务吗？`).then(async()=> {
        this.loading = true;
        const res = await changeJobStatus(row.jobId, row.status);
        if(res.code == 200) {
          this.msgSuccess(text + "成功");
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    handleDelete(obj) { /**删除列表数据方法*/
      this.$confirm(`是否确认删除定时任务编号为${jobIds}的数据项？`, '提示', {
        cancelText: '取消',
        confirmText: '确定'
      }).then(async ()=>{
        this.loading = true;
        const res = await delJob(obj.jobId);
        if(res.code == 200) {
          this.$message.success('删除成功');
          this.handleSearch();
        }
        setTimeout(()=>{
          this.loading = false;
        }, 500)
      }).catch(()=>{})
    },
   
    handleCommand(command, row) { /**更多操作触发*/ 
      switch (command) {
        case "handleRun":
          this.handleRun(row);
          break;
        case "handleView":
          this.handleView(row);
          break;
        case "handleJobLog":
          this.handleJobLog(row);
          break;
        default:
          break;
      }
    },
    handleJobLog(row) { /**日志查看 */
      this.pageDialogObj.visible = true;
      this.pageDialogObj.title = '调度日志';
      this.pageDialogObj.id = row.jobId || 0;
    },
    handleView(row) {  /** 任务详细信息 */
      this.dialogObj.visible = true;
      this.dialogObj.id = row.jobId;
      this.dialogObj.title = '任务详情';
      this.dialogObj.component = 'detail';
    },
    handleRun(row) {/* 立即执行一次 */
      this.$confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(async ()=> {
        this.loading = true;
        const res = await runJob(row.jobId, row.jobGroup);
        if(res.code == 200) {
          this.$modal.msgSuccess("执行成功");
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }).catch(() => {});
    },
    async handleExport() { /**导出列表数据方法*/
      this.loading = true;
      const res = await exportJob(this.searchParams);
      if(res.data && res.status == 200) {
        this.downloadFilesFn(res); /**公共导出方法*/
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleSearch() { /**查询按钮事件*/
      this.queryParams.pageNum = 1;
      this.queryParams.total = 0;
      this.tableData = [];
      this.getListFn();
    },
    handleReset() { /**重置按钮事件*/
      this.resetForm('searchParams', ()=>{
        this.handleSearch();
      })
    },
  },
}
</script>

<style scoped lang='scss'>
.page_component {
  height: 100%;
  .page_component-container {

  }
}
</style>